<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Webcomponent 库</title>
      <link rel="stylesheet" href="src/z-webcom.css" />
        <link rel="stylesheet" href="./src/index.css" />

      <script>
          /**
           * Minified by jsDelivr using Terser v5.19.2.
           * Original file: /npm/details-element-polyfill@2.4.0/dist/details-element-polyfill.js
           *
           * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
           */
          !function(){"use strict";var t,e,n,r,i=document.createElement("details"),a="undefined"!=typeof HTMLDetailsElement&&i instanceof HTMLDetailsElement,o="open"in i||a,u="ontoggle"in i,s='\ndetails, summary {\n  display: block;\n}\ndetails:not([open]) > *:not(summary) {\n  display: none;\n}\nsummary::before {\n  content: "►";\n  padding-right: 0.3rem;\n  font-size: 0.6rem;\n  cursor: default;\n}\n[open] > summary::before {\n  content: "▼";\n}\n',c=[],d=c.forEach,l=c.slice;function f(t){(function(t,e){return(t.tagName==e?[t]:[]).concat("function"==typeof t.getElementsByTagName?l.call(t.getElementsByTagName(e)):[])})(t,"SUMMARY").forEach((function(t){var e=v(t,"DETAILS");t.setAttribute("aria-expanded",e.hasAttribute("open")),t.hasAttribute("tabindex")||t.setAttribute("tabindex","0"),t.hasAttribute("role")||t.setAttribute("role","button")}))}function m(t){return!(t.defaultPrevented||t.ctrlKey||t.metaKey||t.shiftKey||t.target.isContentEditable)}function b(t){addEventListener("click",(function(e){if(m(e)&&e.which<=1){var n=v(e.target,"SUMMARY");n&&n.parentNode&&"DETAILS"==n.parentNode.tagName&&t(n.parentNode)}}),!1),addEventListener("keydown",(function(e){if(m(e)&&(13==e.keyCode||32==e.keyCode)){var n=v(e.target,"SUMMARY");n&&n.parentNode&&"DETAILS"==n.parentNode.tagName&&(t(n.parentNode),e.preventDefault())}}),!1)}function p(t){var e=document.createEvent("Event");e.initEvent("toggle",!1,!1),t.dispatchEvent(e)}function v(t,e){if("function"==typeof t.closest)return t.closest(e);for(;t;){if(t.tagName==e)return t;t=t.parentNode}}o||(document.head.insertAdjacentHTML("afterbegin","<style>"+s+"</style>"),t=document.createElement("details").constructor.prototype,e=t.setAttribute,n=t.removeAttribute,r=Object.getOwnPropertyDescriptor(t,"open"),Object.defineProperties(t,{open:{get:function(){return"DETAILS"==this.tagName?this.hasAttribute("open"):r&&r.get?r.get.call(this):void 0},set:function(t){return"DETAILS"==this.tagName?t?this.setAttribute("open",""):this.removeAttribute("open"):r&&r.set?r.set.call(this,t):void 0}},setAttribute:{value:function(t,n){var r=this,i=function(){return e.call(r,t,n)};if("open"==t&&"DETAILS"==this.tagName){var a=this.hasAttribute("open"),o=i();if(!a){var u=this.querySelector("summary");u&&u.setAttribute("aria-expanded",!0),p(this)}return o}return i()}},removeAttribute:{value:function(t){var e=this,r=function(){return n.call(e,t)};if("open"==t&&"DETAILS"==this.tagName){var i=this.hasAttribute("open"),a=r();if(i){var o=this.querySelector("summary");o&&o.setAttribute("aria-expanded",!1),p(this)}return a}return r()}}}),b((function(t){t.hasAttribute("open")?t.removeAttribute("open"):t.setAttribute("open","")})),f(document),window.MutationObserver?new MutationObserver((function(t){d.call(t,(function(t){d.call(t.addedNodes,f)}))})).observe(document.documentElement,{subtree:!0,childList:!0}):document.addEventListener("DOMNodeInserted",(function(t){f(t.target)}))),o&&!u&&(window.MutationObserver?new MutationObserver((function(t){d.call(t,(function(t){var e=t.target,n=t.attributeName;"DETAILS"==e.tagName&&"open"==n&&p(e)}))})).observe(document.documentElement,{attributes:!0,subtree:!0}):b((function(t){var e=t.getAttribute("open");setTimeout((function(){var n=t.getAttribute("open");e!=n&&p(t)}),1)})))}();
      </script>
      <script >
          /**
           * Minified by jsDelivr using Terser v5.37.0.
           * Original file: /npm/es-module-shims@2.0.10/dist/es-module-shims.js
           *
           * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
           */
          !function(){const e="undefined"!=typeof document,t=()=>{},r=(e,t)=>import(e),n=e?document.querySelector("script[type=esms-options]"):void 0,i=n?JSON.parse(n.innerHTML):{};Object.assign(i,self.esmsInitOptions||{});const s=!e||(i.shimMode||document.querySelectorAll("script[type=module-shim],script[type=importmap-shim],link[rel=modulepreload-shim]").length>0),a=k(s&&i.onimport),o=k(s&&i.resolve);let c=i.fetch?k(i.fetch):fetch;const l=i.meta?k(s&&i.meta):t,f=i.tsTransform||e&&document.currentScript&&document.currentScript.src.replace(/\.js$/,"-typescript.js")||"./es-module-shims-typescript.js",u=i.mapOverrides;let d=i.nonce;if(!d&&e){const e=document.querySelector("script[nonce]");e&&(d=e.nonce||e.getAttribute("nonce"))}const b=k(i.onerror||t),{revokeBlobURLs:p,noLoadEventRetriggers:h,enforceIntegrity:m}=i;function k(e){return"string"==typeof e?self[e]:e}const w=Array.isArray(i.polyfillEnable)?i.polyfillEnable:[],y="all"===i.polyfillEnable||w.includes("all"),g="latest"===i.polyfillEnable||w.includes("latest"),$=w.includes("css-modules")||y||g,v=w.includes("json-modules")||y||g,x=w.includes("wasm-modules")||y,S=w.includes("source-phase")||y,A=w.includes("typescript")||y,O=i.onpolyfill?k(i.onpolyfill):()=>{console.log("%c^^ Module error above is polyfilled and can be ignored ^^","font-weight:900;color:#391")},j=e?document.baseURI:`${location.protocol}//${location.host}${location.pathname.includes("/")?location.pathname.slice(0,location.pathname.lastIndexOf("/")+1):location.pathname}`,E=(e,t="text/javascript")=>URL.createObjectURL(new Blob([e],{type:t}));let{skip:L}=i;if(Array.isArray(L)){const e=L.map((e=>new URL(e,j).href));L=t=>e.some((e=>"/"===e[e.length-1]&&t.startsWith(e)||t===e))}else if("string"==typeof L){const e=new RegExp(L);L=t=>e.test(t)}else L instanceof RegExp&&(L=e=>L.test(e));const C=e=>self.dispatchEvent(Object.assign(new Event("error"),{error:e})),M=e=>{(self.reportError||C)(e),b(e)};function U(e){return e?` imported from ${e}`:""}const N=/\\/g;function I(e){try{if(-1!==e.indexOf(":"))return new URL(e).href}catch(e){}}function R(e,t){return T(e,t)||I(e)||T("./"+e,t)}function T(e,t){const r=t.indexOf("#"),n=t.indexOf("?");if(r+n>-2&&(t=t.slice(0,-1===r?n:-1===n||n>r?r:n)),-1!==e.indexOf("\\")&&(e=e.replace(N,"/")),"/"===e[0]&&"/"===e[1])return t.slice(0,t.indexOf(":")+1)+e;if("."===e[0]&&("/"===e[1]||"."===e[1]&&("/"===e[2]||2===e.length&&(e+="/"))||1===e.length&&(e+="/"))||"/"===e[0]){const r=t.slice(0,t.indexOf(":")+1);if("blob:"===r)throw new TypeError(`Failed to resolve module specifier "${e}". Invalid relative url or base scheme isn't hierarchical.`);let n;if("/"===t[r.length+1]?"file:"!==r?(n=t.slice(r.length+2),n=n.slice(n.indexOf("/")+1)):n=t.slice(8):n=t.slice(r.length+("/"===t[r.length])),"/"===e[0])return t.slice(0,t.length-n.length-1)+e;const i=n.slice(0,n.lastIndexOf("/")+1)+e,s=[];let a=-1;for(let e=0;e<i.length;e++)if(-1===a){if("."===i[e]){if("."===i[e+1]&&("/"===i[e+2]||e+2===i.length)){s.pop(),e+=2;continue}if("/"===i[e+1]||e+1===i.length){e+=1;continue}}for(;"/"===i[e];)e++;a=e}else"/"===i[e]&&(s.push(i.slice(a,e+1)),a=-1);return-1!==a&&s.push(i.slice(a)),t.slice(0,t.length-n.length)+s.join("")}}function _(e,t,r){const n={imports:Object.assign({},r.imports),scopes:Object.assign({},r.scopes),integrity:Object.assign({},r.integrity)};if(e.imports&&q(e.imports,n.imports,t,r),e.scopes)for(let i in e.scopes){const s=R(i,t);q(e.scopes[i],n.scopes[s]||(n.scopes[s]={}),t,r)}return e.integrity&&function(e,t,r){for(let n in e){const i=T(n,r)||n;s&&u||!t[i]||t[i]===e[i]||console.warn(`es-module-shims: Rejected map integrity override "${i}" from ${t[i]} to ${e[i]}.`),t[i]=e[n]}}(e.integrity,n.integrity,t),n}function P(e,t){if(t[e])return e;let r=e.length;do{const n=e.slice(0,r+1);if(n in t)return n}while(-1!==(r=e.lastIndexOf("/",r-1)))}function W(e,t){const r=P(e,t);if(r){const n=t[r];if(null===n)return;return n+e.slice(r.length)}}function H(e,t,r){let n=r&&P(r,e.scopes);for(;n;){const r=W(t,e.scopes[n]);if(r)return r;n=P(n.slice(0,n.lastIndexOf("/")),e.scopes)}return W(t,e.imports)||-1!==t.indexOf(":")&&t}function q(e,t,r,n){for(let i in e){const a=T(i,r)||i;if((!s||!u)&&t[a]&&t[a]!==e[a]){console.warn(`es-module-shims: Rejected map override "${a}" from ${t[a]} to ${e[a]}.`);continue}let o=e[i];if("string"!=typeof o)continue;const c=H(n,T(o,r)||o,r);c?t[a]=c:console.warn(`es-module-shims: Mapping "${i}" -> "${e[i]}" does not resolve`)}}let J=!1,B=!1;const D=e&&HTMLScriptElement.supports;let F=D&&"supports"===D.name&&D("importmap"),K=!1,z=!1,G=!1;const Q=[0,97,115,109,1,0,0,0];let V,X,Y,Z=async function(){return e?new Promise((e=>{const t=document.createElement("iframe");t.style.display="none",t.setAttribute("nonce",d),window.addEventListener("message",(function r({data:n}){Array.isArray(n)&&"esms"===n[0]&&([,F,G,B,J,K,z]=n,e(),document.head.removeChild(t),window.removeEventListener("message",r,!1))}),!1);const r=`<script nonce=${d||""}>b=(s,type='text/javascript')=>URL.createObjectURL(new Blob([s],{type}));i=innerText=>document.head.appendChild(Object.assign(document.createElement('script'),{type:'importmap',nonce:"${d}",innerText}));i(\`{"imports":{"x":"\${b('')}"}}\`);i(\`{"imports":{"y":"\${b('')}"}}\`);Promise.all([${F?"true":"'x'"},${!!F&&"'y'"},${F&&$?"b(`import\"${b('','text/css')}\"with{type:\"css\"}`)":"false"}, ${F&&v?"b(`import\"${b('{}','text/json')}\"with{type:\"json\"}`)":"false"},${F&&x?`b(\`import"\${b(new Uint8Array(${JSON.stringify(Q)}),'application/wasm')}"\`)`:"false"},${F&&x&&S?`b(\`import source x from "\${b(new Uint8Array(${JSON.stringify(Q)}),'application/wasm')}"\`)`:"false"}].map(x =>typeof x==='string'?import(x).then(()=>true,()=>false):x)).then(a=>parent.postMessage(['esms'].concat(a),'*'))<\/script>`;let n=!1,i=!1;function s(){if(!n)return void(i=!0);const e=t.contentDocument;if(e&&0===e.head.childNodes.length){const t=e.createElement("script");d&&t.setAttribute("nonce",d),t.innerHTML=r.slice(15+(d?d.length:0),-9),e.head.appendChild(t)}}t.onload=s,document.head.appendChild(t),n=!0,"srcdoc"in t?t.srcdoc=r:t.contentDocument.write(r),i&&s()})):Promise.all([$&&import(E(`import"${E("","text/css")}"with{type:"css"}`)).then((()=>B=!0),t),v&&import(E(`import"${E("{}","text/json")}"with{type:"json"}`)).then((()=>J=!0),t),x&&import(E(`import"${E(new Uint8Array(Q),"application/wasm")}"`)).then((()=>K=!0),t),x&&S&&import(E(`import source x from"${E(new Uint8Array(Q),"application/wasm")}"`)).then((()=>z=!0),t)])}(),ee=2<<19;const te=1===new Uint8Array(new Uint16Array([1]).buffer)[0]?function(e,t){const r=e.length;let n=0;for(;n<r;)t[n]=e.charCodeAt(n++)}:function(e,t){const r=e.length;let n=0;for(;n<r;){const r=e.charCodeAt(n);t[n++]=(255&r)<<8|r>>>8}};let re,ne,ie;function se(e,t){ie=e;let r="",n=ie;for(;;){ie>=re.length&&le();const e=re.charCodeAt(ie);if(e===t)break;92===e?(r+=re.slice(n,ie),r+=ae(),n=ie):(8232===e||8233===e||ce(e)&&le(),++ie)}return r+=re.slice(n,ie++),r}function ae(){let e=re.charCodeAt(++ie);switch(++ie,e){case 110:return"\n";case 114:return"\r";case 120:return String.fromCharCode(oe(2));case 117:return function(){let e;return 123===re.charCodeAt(ie)?(++ie,e=oe(re.indexOf("}",ie)-ie),++ie,e>1114111&&le()):e=oe(4),e<=65535?String.fromCharCode(e):(e-=65536,String.fromCharCode(55296+(e>>10),56320+(1023&e)))}();case 116:return"\t";case 98:return"\b";case 118:return"\v";case 102:return"\f";case 13:10===re.charCodeAt(ie)&&++ie;case 10:return"";case 56:case 57:le();default:if(e>=48&&e<=55){let t=re.substr(ie-1,3).match(/^[0-7]+/)[0],r=parseInt(t,8);return r>255&&(t=t.slice(0,-1),r=parseInt(t,8)),ie+=t.length-1,e=re.charCodeAt(ie),"0"===t&&56!==e&&57!==e||le(),String.fromCharCode(r)}return ce(e)?"":String.fromCharCode(e)}}function oe(e){const t=ie;let r=0,n=0;for(let t=0;t<e;++t,++ie){let e,i=re.charCodeAt(ie);if(95!==i){if(i>=97)e=i-97+10;else if(i>=65)e=i-65+10;else{if(!(i>=48&&i<=57))break;e=i-48}if(e>=16)break;n=i,r=16*r+e}else 95!==n&&0!==t||le(),n=i}return 95!==n&&ie-t===e||le(),r}function ce(e){return 13===e||10===e}function le(){throw Object.assign(Error(`Parse error ${ne}:${re.slice(0,ie).split("\n").length}:${ie-re.lastIndexOf("\n",ie-1)}`),{idx:ie})}function fe(e,t=j){const r=T(e,t)||I(e),n=xe&&H(xe,r||e,t),i=(Se===xe?n:H(Se,r||e,t))||n||he(e,t);let s=!1,a=!1;return F?G||(r||n||(s=!0),n&&i!==n&&(a=!0)):r?r!==i&&(a=!0):s=!0,{r:i,n:s,N:a}}const ue=o?(e,t=j)=>{const r=o(e,t,pe);return r?{r:r,n:!0,N:!0}:fe(e,t)}:fe;async function de(t,r,n=j,i){return await Ae,a&&await a(t,r,n),!s&&ge||(e&&Ve(),Le=!1),await je,ue(t,n).r}async function be(e,t,r){"string"==typeof t&&(r=t,t=void 0);let n=await de(e,t,r),i=null;return"object"==typeof t&&"object"==typeof t.with&&"string"==typeof t.with.type&&(i=`export{default}from'${n}'with{type:"${t.with.type}"}`,n+="?entry"),Ce(n,{credentials:"same-origin"},i,void 0,void 0)}function pe(e,t){return H(Se,T(e,t)||e,t)||he(e,t)}function he(e,t){throw Error(`Unable to resolve specifier '${e}'${U(t)}`)}function me(e,t=this.url){return ue(e,`${t}`).r}(s||S)&&(be.source=async function(e,t,r){"string"==typeof t&&(r=t,t=void 0);const n=ze(await de(e,t,r),{credentials:"same-origin"},null,null);return Ee&&!s&&n.n&&nativelyLoaded&&(O(),Ee=!1),await n.f,be._s[n.r]}),self.importShim=be,be.resolve=(e,t)=>ue(e,t).r,be.getImportMap=()=>JSON.parse(JSON.stringify(Se)),be.addImportMap=e=>{if(!s)throw new Error("Unsupported in polyfill mode.");Se=_(e,j,Se)};const ke=be._r={},we=be._s={};async function ye(e,t){t[e.u]=1,await e.L,await Promise.all(e.d.map((({l:e,s:r})=>{if(!e.b&&!t[e.u])return r?e.f:ye(e,t)})))}let ge,$e=!1,ve=!1,xe=null,Se={imports:{},scopes:{},integrity:{}};const Ae=Z.then((()=>{if(ge=!0!==i.polyfillEnable&&F&&(!v||J)&&(!$||B)&&(!x||K)&&(!S||z)&&(!ve||G)&&!$e&&!A,!s&&S&&"undefined"!=typeof WebAssembly&&!Object.getPrototypeOf(WebAssembly.Module).name){const e=Symbol(),t=t=>Object.defineProperty(t,e,{writable:!1,configurable:!1,value:"WebAssembly.Module"});class r{get[Symbol.toStringTag](){if(this[e])return this[e];throw new TypeError("Not an AbstractModuleSource")}}const{Module:n,compile:i,compileStreaming:s}=WebAssembly;WebAssembly.Module=Object.setPrototypeOf(Object.assign((function(...e){return t(new n(...e))}),n),r),WebAssembly.Module.prototype=Object.setPrototypeOf(n.prototype,r.prototype),WebAssembly.compile=function(...e){return i(...e).then(t)},WebAssembly.compileStreaming=function(...e){return s(...e).then(t)}}if(e){if(!F){const e=HTMLScriptElement.supports||(e=>"classic"===e||"module"===e);HTMLScriptElement.supports=t=>"importmap"===t||e(t)}if(s||!ge)if(Oe(),"complete"===document.readyState)it();else{document.addEventListener("readystatechange",(async function e(){await Ae,Ve(),"complete"===document.readyState&&(it(),document.removeEventListener("readystatechange",e))}))}Ve()}}));function Oe(){const e=new MutationObserver((e=>{for(const t of e)if("childList"===t.type)for(const e of t.addedNodes)"SCRIPT"===e.tagName?(e.type!==(s?"module-shim":"module")||e.ep||ct(e,!0),e.type!==(s?"importmap-shim":"importmap")||e.ep||ot(e,!0)):"LINK"!==e.tagName||e.rel!==(s?"modulepreload-shim":"modulepreload")||e.ep||ft(e)}));e.observe(document,{childList:!0}),e.observe(document.head,{childList:!0}),Ve()}let je=Ae,Ee=!0,Le=!0;async function Ce(e,t,n,i,o){if(Le=!1,await Ae,await je,a&&await a(e,"string"!=typeof t?t:{},""),!s&&ge)return i?null:(await o,r(n?E(n):e));const c=ze(e,t,null,n);Qe(c,t);const l={};if(await ye(c,l),Ue(c,l),await o,!s&&!c.n){if(i)return;if(n)return await r(E(n))}Ee&&!s&&c.n&&i&&(O(),Ee=!1);const f=await(s||c.n||c.N?r(c.b,c.u):import(c.u));return c.s&&(await r(c.s,c.u)).u$_(f),p&&function(e){let t=0;const r=e.length,n=self.requestIdleCallback?self.requestIdleCallback:self.requestAnimationFrame;function i(){const s=100*t;if(!(s>r)){for(const t of e.slice(s,s+100)){const e=ke[t];e&&e.b&&URL.revokeObjectURL(e.b)}t++,n(i)}}n(i)}(Object.keys(l)),f}function Me(e){return`'${e.replace(/'/g,"\\'")}'`}function Ue(e,t){if(e.b||!t[e.u])return;t[e.u]=0;for(const{l:r,s:n}of e.d)n||Ue(r,t);if(e.n||(e.n=e.d.some((e=>e.l.n))),e.N||(e.N=e.d.some((e=>e.l.N))),!s&&!e.n&&!e.N)return e.b=e.u,void(e.S=void 0);const[r,n]=e.a,i=e.S;let a="",o=0,c=0,f=[];function u(t){for(;f[f.length-1]<t;){const t=f.pop();a+=`${i.slice(o,t)}, ${Me(e.r)}`,o=t}a+=i.slice(o,t),o=t}for(const{s:t,e:n,ss:s,se:d,d:b,t:p,a:h}of r)if(4===p){let{l:r}=e.d[c++];u(s),a+="import ",o=s+14,u(t-1),a+=`/*${i.slice(t-1,n+1)}*/'${E(`export default importShim._s[${Me(r.r)}]`)}'`,o=n+1}else if(-1===b){let{l:r}=e.d[c++],s=r.b,l=!s;l&&((s=r.s)||(s=r.s=E(`export function u$_(m){${r.a[1].map((({s:e,e:t},n)=>{const i='"'===r.S[e]||"'"===r.S[e];return`e$_${n}=m${i?"[":"."}${r.S.slice(e,t)}${i?"]":""}`})).join(",")}}${r.a[1].length?`let ${r.a[1].map(((e,t)=>`e$_${t}`)).join(",")};`:""}export {${r.a[1].map((({s:e,e:t},n)=>`e$_${n} as ${r.S.slice(e,t)}`)).join(",")}}\n//# sourceURL=${r.r}?cycle`)));const f=!B&&!J||!(h>0);u(t-1),a+=`/*${i.slice(t-1,n+1)}*/'${s}'`,!l&&r.s&&(a+=`;import*as m$_${c} from'${r.b}';import{u$_ as u$_${c}}from'${r.s}';u$_${c}(m$_${c})`,r.s=void 0),o=f?d:n+1}else-2===b?(e.m={url:e.r,resolve:me},l(e.m,e.u),u(t),a+=`importShim._r[${Me(e.u)}].m`,o=d):(u(s+6),a+=`Shim${5===p?".source":""}(`,f.push(d-1),o=t);function d(t,r){const n=r+t.length,s=i.indexOf("\n",n),c=-1!==s?s:i.length;let l=i.slice(n,c);try{l=new URL(l,e.r).href}catch{}u(n),a+=l,o=c}!e.s||0!==r.length&&-1!==r[r.length-1].d||(a+=`\n;import{u$_}from'${e.s}';try{u$_({${n.filter((e=>e.ln)).map((({s:e,e:t,ln:r})=>`${i.slice(e,t)}:${r}`)).join(",")}})}catch(_){};\n`);let b=i.lastIndexOf(Ne),p=i.lastIndexOf(Ie);b<o&&(b=-1),p<o&&(p=-1),-1!==b&&(-1===p||p>b)&&d(Ne,b),-1!==p&&(d(Ie,p),-1!==b&&b>p&&d(Ne,b)),u(i.length),-1===b&&(a+=Ne+e.r),e.b=E(a),e.S=void 0}const Ne="\n//# sourceURL=",Ie="\n//# sourceMappingURL=",Re=/^(text|application)\/(x-)?javascript(;|$)/,Te=/^application\/wasm(;|$)/,_e=/^(text|application)\/json(;|$)/,Pe=/^(text|application)\/css(;|$)/,We=/^application\/typescript(;|$)|/,He=/url\(\s*(?:(["'])((?:\\.|[^\n\\"'])+)\1|((?:\\.|[^\s,"'()\\])+))\s*\)/g;let qe,Je=[],Be=0;async function De(e,t,r){if(m&&!t.integrity)throw Error(`No integrity for ${e}${U(r)}.`);const n=function(){if(++Be>100)return new Promise((e=>Je.push(e)))}();n&&await n;try{var i=await c(e,t)}catch(t){throw t.message=`Unable to fetch ${e}${U(r)} - see network log for details.\n`+t.message,t}finally{Be--,Je.length&&Je.shift()()}if(!i.ok){const e=new TypeError(`${i.status} ${i.statusText} ${i.url}${U(r)}`);throw e.response=i,e}return i}async function Fe(){const e=await import(f);qe||(qe=e.transform)}async function Ke(e,t,r){const n=Se.integrity[e],i=await De(e,n&&!t.integrity?Object.assign({},t,{integrity:n}):t,r),a=i.url,o=i.headers.get("content-type");if(Re.test(o))return{r:a,s:await i.text(),t:"js"};if(Te.test(o)){const e=await(we[a]||(we[a]=WebAssembly.compileStreaming(i)));we[a]=e;let t="",r=0,n="";for(const i of WebAssembly.Module.imports(e)){const e=Me(i.module);t+=`import * as impt${r} from ${e};\n`,n+=`${e}:impt${r++},`}r=0,t+=`const instance = await WebAssembly.instantiate(importShim._s[${Me(a)}], {${n}});\n`;for(const r of WebAssembly.Module.exports(e))t+=`export const ${r.name} = instance.exports['${r.name}'];\n`;return{r:a,s:t,t:"wasm"}}if(_e.test(o))return{r:a,s:`export default ${await i.text()}`,t:"json"};if(Pe.test(o))return{r:a,s:`var s=new CSSStyleSheet();s.replaceSync(${JSON.stringify((await i.text()).replace(He,((t,r="",n,i)=>`url(${r}${R(n||i,e)}${r})`)))});export default s;`,t:"css"};if((s||A)&&(We.test(o)||e.endsWith(".ts")||e.endsWith(".mts"))){const t=await i.text();qe||await Fe();const r=qe(t,e);return{r:a,s:void 0===r?t:r,t:void 0!==r?"ts":"js"}}throw Error(`Unsupported Content-Type "${o}" loading ${e}${U(r)}. Modules must be served with a valid MIME type like application/javascript.`)}function ze(e,t,r,n){if(n&&ke[e]){let t=0;for(;ke[e+ ++t];);e+=t}let i=ke[e];return i||(ke[e]=i={u:e,r:n?e:void 0,f:void 0,S:n,L:void 0,a:void 0,d:void 0,b:void 0,s:void 0,n:!1,N:!1,t:null,m:null},i.f=(async()=>{i.S||(({r:i.r,s:i.S,t:i.t}=await(lt[e]||Ke(e,t,r))),i.n||"js"===i.t||s||!function(e){if("css"===e&&!$||"json"===e&&!v||"wasm"===e&&!x||"ts"===e&&!A)throw Ge(`${e}-modules`);return"css"===e&&!B||"json"===e&&!J||"wasm"===e&&!K||"ts"===e}(i.t)||(i.n=!0));try{i.a=function(e,t="@"){re=e,ne=t;const r=2*re.length+(2<<18);if(r>ee||!V){for(;r>ee;)ee*=2;X=new ArrayBuffer(ee),te("xportmportlassforetaourceromsyncunctionssertvoyiedelecontininstantybreareturdebuggeawaithrwhileifcatcfinallels",new Uint16Array(X,16,110)),V=function(e,t,r){"use asm";var n=new e.Int8Array(r),i=new e.Int16Array(r),s=new e.Int32Array(r),a=new e.Uint8Array(r),o=new e.Uint16Array(r),c=1040;function l(){var e=0,t=0,r=0,a=0,o=0,l=0,d=0;d=c;c=c+10240|0;n[804]=1;n[803]=0;i[399]=0;i[400]=0;s[69]=s[2];n[805]=0;s[68]=0;n[802]=0;s[70]=d+2048;s[71]=d;n[806]=0;e=(s[3]|0)+-2|0;s[72]=e;t=e+(s[66]<<1)|0;s[73]=t;e:while(1){r=e+2|0;s[72]=r;if(e>>>0>=t>>>0){a=18;break}t:do{switch(i[r>>1]|0){case 9:case 10:case 11:case 12:case 13:case 32:break;case 101:{if((((i[400]|0)==0?W(r)|0:0)?(x(e+4|0,16,10)|0)==0:0)?(f(),(n[804]|0)==0):0){a=9;break e}else a=17;break}case 105:{if(W(r)|0?(x(e+4|0,26,10)|0)==0:0){u();a=17}else a=17;break}case 59:{a=17;break}case 47:switch(i[e+4>>1]|0){case 47:{N();break t}case 42:{v(1);break t}default:{a=16;break e}}default:{a=16;break e}}}while(0);if((a|0)==17){a=0;s[69]=s[72]}e=s[72]|0;t=s[73]|0}if((a|0)==9){e=s[72]|0;s[69]=e;a=19}else if((a|0)==16){n[804]=0;s[72]=e;a=19}else if((a|0)==18)if(!(n[802]|0)){e=r;a=19}else e=0;do{if((a|0)==19){e:while(1){t=e+2|0;s[72]=t;if(e>>>0>=(s[73]|0)>>>0){a=92;break}t:do{switch(i[t>>1]|0){case 9:case 10:case 11:case 12:case 13:case 32:break;case 101:{if(((i[400]|0)==0?W(t)|0:0)?(x(e+4|0,16,10)|0)==0:0){f();a=91}else a=91;break}case 105:{if(W(t)|0?(x(e+4|0,26,10)|0)==0:0){u();a=91}else a=91;break}case 99:{if((W(t)|0?(x(e+4|0,36,8)|0)==0:0)?G(i[e+12>>1]|0)|0:0){n[806]=1;a=91}else a=91;break}case 40:{r=s[70]|0;e=i[400]|0;a=e&65535;s[r+(a<<3)>>2]=1;t=s[69]|0;i[400]=e+1<<16>>16;s[r+(a<<3)+4>>2]=t;a=91;break}case 41:{t=i[400]|0;if(!(t<<16>>16)){a=36;break e}r=t+-1<<16>>16;i[400]=r;a=i[399]|0;t=a&65535;if(a<<16>>16!=0?(s[(s[70]|0)+((r&65535)<<3)>>2]|0)==5:0){t=s[(s[71]|0)+(t+-1<<2)>>2]|0;r=t+4|0;if(!(s[r>>2]|0))s[r>>2]=(s[69]|0)+2;s[t+12>>2]=e+4;i[399]=a+-1<<16>>16;a=91}else a=91;break}case 123:{a=s[69]|0;r=s[63]|0;e=a;do{if((i[a>>1]|0)==41&(r|0)!=0?(s[r+4>>2]|0)==(a|0):0){t=s[64]|0;s[63]=t;if(!t){s[59]=0;break}else{s[t+32>>2]=0;break}}}while(0);r=s[70]|0;t=i[400]|0;a=t&65535;s[r+(a<<3)>>2]=(n[806]|0)==0?2:6;i[400]=t+1<<16>>16;s[r+(a<<3)+4>>2]=e;n[806]=0;a=91;break}case 125:{e=i[400]|0;if(!(e<<16>>16)){a=49;break e}r=s[70]|0;a=e+-1<<16>>16;i[400]=a;if((s[r+((a&65535)<<3)>>2]|0)==4){p();a=91}else a=91;break}case 39:{k(39);a=91;break}case 34:{k(34);a=91;break}case 47:switch(i[e+4>>1]|0){case 47:{N();break t}case 42:{v(1);break t}default:{e=s[69]|0;t=i[e>>1]|0;r:do{if(!(A(t)|0))if(t<<16>>16==41){r=i[400]|0;if(!(T(s[(s[70]|0)+((r&65535)<<3)+4>>2]|0)|0))a=65}else a=64;else switch(t<<16>>16){case 46:if(((i[e+-2>>1]|0)+-48&65535)<10){a=64;break r}else break r;case 43:if((i[e+-2>>1]|0)==43){a=64;break r}else break r;case 45:if((i[e+-2>>1]|0)==45){a=64;break r}else break r;default:break r}}while(0);if((a|0)==64){r=i[400]|0;a=65}r:do{if((a|0)==65){a=0;if(r<<16>>16!=0?(o=s[70]|0,l=(r&65535)+-1|0,t<<16>>16==102?(s[o+(l<<3)>>2]|0)==1:0):0){if((i[e+-2>>1]|0)==111?L(s[o+(l<<3)+4>>2]|0,44,3)|0:0)break}else a=69;if((a|0)==69?(0,t<<16>>16==125):0){a=s[70]|0;r=r&65535;if($(s[a+(r<<3)+4>>2]|0)|0)break;if((s[a+(r<<3)>>2]|0)==6)break}if(!(b(e)|0)){switch(t<<16>>16){case 0:break r;case 47:{if(n[805]|0)break r;break}default:{}}a=s[65]|0;if((a|0?e>>>0>=(s[a>>2]|0)>>>0:0)?e>>>0<=(s[a+4>>2]|0)>>>0:0){g();n[805]=0;a=91;break t}r=s[3]|0;do{if(e>>>0<=r>>>0)break;e=e+-2|0;s[69]=e;t=i[e>>1]|0}while(!(U(t)|0));if(_(t)|0){do{if(e>>>0<=r>>>0)break;e=e+-2|0;s[69]=e}while(_(i[e>>1]|0)|0);if(C(e)|0){g();n[805]=0;a=91;break t}}n[805]=1;a=91;break t}}}while(0);g();n[805]=0;a=91;break t}}case 96:{r=s[70]|0;t=i[400]|0;a=t&65535;s[r+(a<<3)+4>>2]=s[69];i[400]=t+1<<16>>16;s[r+(a<<3)>>2]=3;p();a=91;break}default:a=91}}while(0);if((a|0)==91){a=0;s[69]=s[72]}e=s[72]|0}if((a|0)==36){z();e=0;break}else if((a|0)==49){z();e=0;break}else if((a|0)==92){e=(n[802]|0)==0?(i[399]|i[400])<<16>>16==0:0;break}}}while(0);c=d;return e|0}function f(){var e=0,t=0,r=0,a=0,o=0,c=0,l=0,f=0,u=0,b=0,p=0,m=0,y=0,g=0;f=s[72]|0;u=s[65]|0;g=f+12|0;s[72]=g;r=h(1)|0;e=s[72]|0;if(!((e|0)==(g|0)?!(S(r)|0):0))y=3;e:do{if((y|0)==3){t:do{switch(r<<16>>16){case 123:{s[72]=e+2;e=h(1)|0;t=s[72]|0;while(1){if(Q(e)|0){k(e);e=(s[72]|0)+2|0;s[72]=e}else{I(e)|0;e=s[72]|0}h(1)|0;e=w(t,e)|0;if(e<<16>>16==44){s[72]=(s[72]|0)+2;e=h(1)|0}if(e<<16>>16==125){y=15;break}g=t;t=s[72]|0;if((t|0)==(g|0)){y=12;break}if(t>>>0>(s[73]|0)>>>0){y=14;break}}if((y|0)==12){z();break e}else if((y|0)==14){z();break e}else if((y|0)==15){n[803]=1;s[72]=(s[72]|0)+2;break t}break}case 42:{s[72]=e+2;h(1)|0;g=s[72]|0;w(g,g)|0;break}default:{n[804]=0;switch(r<<16>>16){case 100:{f=e+14|0;s[72]=f;switch((h(1)|0)<<16>>16){case 97:{t=s[72]|0;if((x(t+2|0,72,8)|0)==0?(o=t+10|0,_(i[o>>1]|0)|0):0){s[72]=o;h(0)|0;y=22}break}case 102:{y=22;break}case 99:{t=s[72]|0;if(((x(t+2|0,36,8)|0)==0?(a=t+10|0,g=i[a>>1]|0,G(g)|0|g<<16>>16==123):0)?(s[72]=a,c=h(1)|0,c<<16>>16!=123):0){m=c;y=31}break}default:{}}r:do{if((y|0)==22?(l=s[72]|0,(x(l+2|0,80,14)|0)==0):0){r=l+16|0;t=i[r>>1]|0;if(!(G(t)|0))switch(t<<16>>16){case 40:case 42:break;default:break r}s[72]=r;t=h(1)|0;if(t<<16>>16==42){s[72]=(s[72]|0)+2;t=h(1)|0}if(t<<16>>16!=40){m=t;y=31}}}while(0);if((y|0)==31?(b=s[72]|0,I(m)|0,p=s[72]|0,p>>>0>b>>>0):0){E(e,f,b,p);s[72]=(s[72]|0)+-2;break e}E(e,f,0,0);s[72]=e+12;break e}case 97:{s[72]=e+10;h(0)|0;e=s[72]|0;y=35;break}case 102:{y=35;break}case 99:{if((x(e+2|0,36,8)|0)==0?(t=e+10|0,U(i[t>>1]|0)|0):0){s[72]=t;g=h(1)|0;y=s[72]|0;I(g)|0;g=s[72]|0;E(y,g,y,g);s[72]=(s[72]|0)+-2;break e}e=e+4|0;s[72]=e;break}case 108:case 118:break;default:break e}if((y|0)==35){s[72]=e+16;e=h(1)|0;if(e<<16>>16==42){s[72]=(s[72]|0)+2;e=h(1)|0}y=s[72]|0;I(e)|0;g=s[72]|0;E(y,g,y,g);s[72]=(s[72]|0)+-2;break e}s[72]=e+6;n[804]=0;r=h(1)|0;e=s[72]|0;r=(I(r)|0|32)<<16>>16==123;a=s[72]|0;if(r){s[72]=a+2;g=h(1)|0;e=s[72]|0;I(g)|0}r:while(1){t=s[72]|0;if((t|0)==(e|0))break;E(e,t,e,t);t=h(1)|0;if(r)switch(t<<16>>16){case 93:case 125:break e;default:{}}e=s[72]|0;if(t<<16>>16!=44){y=51;break}s[72]=e+2;t=h(1)|0;e=s[72]|0;switch(t<<16>>16){case 91:case 123:{y=51;break r}default:{}}I(t)|0}if((y|0)==51)s[72]=e+-2;if(!r)break e;s[72]=a+-2;break e}}}while(0);g=(h(1)|0)<<16>>16==102;e=s[72]|0;if(g?(x(e+2|0,66,6)|0)==0:0){s[72]=e+8;d(f,h(1)|0,0);e=(u|0)==0?240:u+16|0;while(1){e=s[e>>2]|0;if(!e)break e;s[e+12>>2]=0;s[e+8>>2]=0;e=e+16|0}}s[72]=e+-2}}while(0);return}function u(){var e=0,t=0,r=0,a=0,o=0,c=0,l=0;o=s[72]|0;r=o+12|0;s[72]=r;a=h(1)|0;t=s[72]|0;e:do{if(a<<16>>16!=46)if(a<<16>>16==115&t>>>0>r>>>0)if((x(t+2|0,56,10)|0)==0?(e=t+12|0,G(i[e>>1]|0)|0):0)c=14;else{t=6;r=0;c=46}else{e=a;r=0;c=15}else{s[72]=t+2;switch((h(1)|0)<<16>>16){case 109:{e=s[72]|0;if(x(e+2|0,50,6)|0)break e;t=s[69]|0;if(!(P(t)|0)?(i[t>>1]|0)==46:0)break e;m(o,o,e+8|0,2);break e}case 115:{e=s[72]|0;if(x(e+2|0,56,10)|0)break e;t=s[69]|0;if(!(P(t)|0)?(i[t>>1]|0)==46:0)break e;e=e+12|0;c=14;break e}default:break e}}}while(0);if((c|0)==14){s[72]=e;e=h(1)|0;r=1;c=15}e:do{if((c|0)==15)switch(e<<16>>16){case 40:{t=s[70]|0;l=i[400]|0;a=l&65535;s[t+(a<<3)>>2]=5;e=s[72]|0;i[400]=l+1<<16>>16;s[t+(a<<3)+4>>2]=e;if((i[s[69]>>1]|0)==46)break e;s[72]=e+2;t=h(1)|0;m(o,s[72]|0,0,e);if(r){e=s[63]|0;s[e+28>>2]=5}else e=s[63]|0;o=s[71]|0;l=i[399]|0;i[399]=l+1<<16>>16;s[o+((l&65535)<<2)>>2]=e;switch(t<<16>>16){case 39:{k(39);break}case 34:{k(34);break}default:{s[72]=(s[72]|0)+-2;break e}}e=(s[72]|0)+2|0;s[72]=e;switch((h(1)|0)<<16>>16){case 44:{s[72]=(s[72]|0)+2;h(1)|0;o=s[63]|0;s[o+4>>2]=e;l=s[72]|0;s[o+16>>2]=l;n[o+24>>0]=1;s[72]=l+-2;break e}case 41:{i[400]=(i[400]|0)+-1<<16>>16;l=s[63]|0;s[l+4>>2]=e;s[l+12>>2]=(s[72]|0)+2;n[l+24>>0]=1;i[399]=(i[399]|0)+-1<<16>>16;break e}default:{s[72]=(s[72]|0)+-2;break e}}}case 123:{if(r){t=12;r=1;c=46;break e}e=s[72]|0;if(i[400]|0){s[72]=e+-2;break e}while(1){if(e>>>0>=(s[73]|0)>>>0)break;e=h(1)|0;if(!(Q(e)|0)){if(e<<16>>16==125){c=36;break}}else k(e);e=(s[72]|0)+2|0;s[72]=e}if((c|0)==36)s[72]=(s[72]|0)+2;l=(h(1)|0)<<16>>16==102;e=s[72]|0;if(l?x(e+2|0,66,6)|0:0){z();break e}s[72]=e+8;e=h(1)|0;if(Q(e)|0){d(o,e,0);break e}else{z();break e}}default:{if(r){t=12;r=1;c=46;break e}switch(e<<16>>16){case 42:case 39:case 34:{r=0;c=48;break e}default:{t=6;r=0;c=46;break e}}}}}while(0);if((c|0)==46){e=s[72]|0;if((e|0)==(o+(t<<1)|0))s[72]=e+-2;else c=48}do{if((c|0)==48){if(i[400]|0){s[72]=(s[72]|0)+-2;break}e=s[73]|0;t=s[72]|0;while(1){if(t>>>0>=e>>>0){c=55;break}a=i[t>>1]|0;if(Q(a)|0){c=53;break}l=t+2|0;s[72]=l;t=l}if((c|0)==53){d(o,a,r);break}else if((c|0)==55){z();break}}}while(0);return}function d(e,t,r){e=e|0;t=t|0;r=r|0;var n=0,a=0;n=(s[72]|0)+2|0;switch(t<<16>>16){case 39:{k(39);a=5;break}case 34:{k(34);a=5;break}default:z()}do{if((a|0)==5){m(e,n,s[72]|0,1);if(r)s[(s[63]|0)+28>>2]=4;s[72]=(s[72]|0)+2;t=h(0)|0;r=t<<16>>16==97;if(r){n=s[72]|0;if(x(n+2|0,94,10)|0)a=13}else{n=s[72]|0;if(!(((t<<16>>16==119?(i[n+2>>1]|0)==105:0)?(i[n+4>>1]|0)==116:0)?(i[n+6>>1]|0)==104:0))a=13}if((a|0)==13){s[72]=n+-2;break}s[72]=n+((r?6:4)<<1);if((h(1)|0)<<16>>16!=123){s[72]=n;break}r=s[72]|0;t=r;e:while(1){s[72]=t+2;t=h(1)|0;switch(t<<16>>16){case 39:{k(39);s[72]=(s[72]|0)+2;t=h(1)|0;break}case 34:{k(34);s[72]=(s[72]|0)+2;t=h(1)|0;break}default:t=I(t)|0}if(t<<16>>16!=58){a=22;break}s[72]=(s[72]|0)+2;switch((h(1)|0)<<16>>16){case 39:{k(39);break}case 34:{k(34);break}default:{a=26;break e}}s[72]=(s[72]|0)+2;switch((h(1)|0)<<16>>16){case 125:{a=31;break e}case 44:break;default:{a=30;break e}}s[72]=(s[72]|0)+2;if((h(1)|0)<<16>>16==125){a=31;break}t=s[72]|0}if((a|0)==22){s[72]=n;break}else if((a|0)==26){s[72]=n;break}else if((a|0)==30){s[72]=n;break}else if((a|0)==31){a=s[63]|0;s[a+16>>2]=r;s[a+12>>2]=(s[72]|0)+2;break}}}while(0);return}function b(e){e=e|0;e:do{switch(i[e>>1]|0){case 100:switch(i[e+-2>>1]|0){case 105:{e=L(e+-4|0,104,2)|0;break e}case 108:{e=L(e+-4|0,108,3)|0;break e}default:{e=0;break e}}case 101:switch(i[e+-2>>1]|0){case 115:switch(i[e+-4>>1]|0){case 108:{e=M(e+-6|0,101)|0;break e}case 97:{e=M(e+-6|0,99)|0;break e}default:{e=0;break e}}case 116:{e=L(e+-4|0,114,4)|0;break e}case 117:{e=L(e+-4|0,122,6)|0;break e}default:{e=0;break e}}case 102:{if((i[e+-2>>1]|0)==111?(i[e+-4>>1]|0)==101:0)switch(i[e+-6>>1]|0){case 99:{e=L(e+-8|0,134,6)|0;break e}case 112:{e=L(e+-8|0,146,2)|0;break e}default:{e=0;break e}}else e=0;break}case 107:{e=L(e+-2|0,150,4)|0;break}case 110:{e=e+-2|0;if(M(e,105)|0)e=1;else e=L(e,158,5)|0;break}case 111:{e=M(e+-2|0,100)|0;break}case 114:{e=L(e+-2|0,168,7)|0;break}case 116:{e=L(e+-2|0,182,4)|0;break}case 119:switch(i[e+-2>>1]|0){case 101:{e=M(e+-4|0,110)|0;break e}case 111:{e=L(e+-4|0,190,3)|0;break e}default:{e=0;break e}}default:e=0}}while(0);return e|0}function p(){var e=0,t=0,r=0,n=0;t=s[73]|0;r=s[72]|0;e:while(1){e=r+2|0;if(r>>>0>=t>>>0){t=10;break}switch(i[e>>1]|0){case 96:{t=7;break e}case 36:{if((i[r+4>>1]|0)==123){t=6;break e}break}case 92:{e=r+4|0;break}default:{}}r=e}if((t|0)==6){e=r+4|0;s[72]=e;t=s[70]|0;n=i[400]|0;r=n&65535;s[t+(r<<3)>>2]=4;i[400]=n+1<<16>>16;s[t+(r<<3)+4>>2]=e}else if((t|0)==7){s[72]=e;r=s[70]|0;n=(i[400]|0)+-1<<16>>16;i[400]=n;if((s[r+((n&65535)<<3)>>2]|0)!=3)z()}else if((t|0)==10){s[72]=e;z()}return}function h(e){e=e|0;var t=0,r=0,n=0;r=s[72]|0;e:do{t=i[r>>1]|0;t:do{if(t<<16>>16!=47)if(e)if(G(t)|0)break;else break e;else if(_(t)|0)break;else break e;else switch(i[r+2>>1]|0){case 47:{N();break t}case 42:{v(e);break t}default:{t=47;break e}}}while(0);n=s[72]|0;r=n+2|0;s[72]=r}while(n>>>0<(s[73]|0)>>>0);return t|0}function m(e,t,r,i){e=e|0;t=t|0;r=r|0;i=i|0;var a=0,o=0;o=s[67]|0;s[67]=o+36;a=s[63]|0;s[((a|0)==0?236:a+32|0)>>2]=o;s[64]=a;s[63]=o;s[o+8>>2]=e;if(2==(i|0)){e=3;a=r}else{a=1==(i|0);e=a?1:2;a=a?r+2|0:0}s[o+12>>2]=a;s[o+28>>2]=e;s[o>>2]=t;s[o+4>>2]=r;s[o+16>>2]=0;s[o+20>>2]=i;t=1==(i|0);n[o+24>>0]=t&1;s[o+32>>2]=0;if(t|2==(i|0))n[803]=1;return}function k(e){e=e|0;var t=0,r=0,n=0,a=0;a=s[73]|0;t=s[72]|0;while(1){n=t+2|0;if(t>>>0>=a>>>0){t=9;break}r=i[n>>1]|0;if(r<<16>>16==e<<16>>16){t=10;break}if(r<<16>>16==92){r=t+4|0;if((i[r>>1]|0)==13){t=t+6|0;t=(i[t>>1]|0)==10?t:r}else t=r}else if(Y(r)|0){t=9;break}else t=n}if((t|0)==9){s[72]=n;z()}else if((t|0)==10)s[72]=n;return}function w(e,t){e=e|0;t=t|0;var r=0,n=0,a=0,o=0;r=s[72]|0;n=i[r>>1]|0;o=(e|0)==(t|0);a=o?0:e;o=o?0:t;if(n<<16>>16==97){s[72]=r+4;r=h(1)|0;e=s[72]|0;if(Q(r)|0){k(r);t=(s[72]|0)+2|0;s[72]=t}else{I(r)|0;t=s[72]|0}n=h(1)|0;r=s[72]|0}if((r|0)!=(e|0))E(e,t,a,o);return n|0}function y(){var e=0,t=0,r=0;r=s[73]|0;t=s[72]|0;e:while(1){e=t+2|0;if(t>>>0>=r>>>0){t=6;break}switch(i[e>>1]|0){case 13:case 10:{t=6;break e}case 93:{t=7;break e}case 92:{e=t+4|0;break}default:{}}t=e}if((t|0)==6){s[72]=e;z();e=0}else if((t|0)==7){s[72]=e;e=93}return e|0}function g(){var e=0,t=0,r=0;e:while(1){e=s[72]|0;t=e+2|0;s[72]=t;if(e>>>0>=(s[73]|0)>>>0){r=7;break}switch(i[t>>1]|0){case 13:case 10:{r=7;break e}case 47:break e;case 91:{y()|0;break}case 92:{s[72]=e+4;break}default:{}}}if((r|0)==7)z();return}function $(e){e=e|0;switch(i[e>>1]|0){case 62:{e=(i[e+-2>>1]|0)==61;break}case 41:case 59:{e=1;break}case 104:{e=L(e+-2|0,210,4)|0;break}case 121:{e=L(e+-2|0,218,6)|0;break}case 101:{e=L(e+-2|0,230,3)|0;break}default:e=0}return e|0}function v(e){e=e|0;var t=0,r=0,n=0,a=0,o=0;a=(s[72]|0)+2|0;s[72]=a;r=s[73]|0;while(1){t=a+2|0;if(a>>>0>=r>>>0)break;n=i[t>>1]|0;if(!e?Y(n)|0:0)break;if(n<<16>>16==42?(i[a+4>>1]|0)==47:0){o=8;break}a=t}if((o|0)==8){s[72]=t;t=a+4|0}s[72]=t;return}function x(e,t,r){e=e|0;t=t|0;r=r|0;var i=0,s=0;e:do{if(!r)e=0;else{while(1){i=n[e>>0]|0;s=n[t>>0]|0;if(i<<24>>24!=s<<24>>24)break;r=r+-1|0;if(!r){e=0;break e}else{e=e+1|0;t=t+1|0}}e=(i&255)-(s&255)|0}}while(0);return e|0}function S(e){e=e|0;e:do{switch(e<<16>>16){case 38:case 37:case 33:{e=1;break}default:if((e&-8)<<16>>16==40|(e+-58&65535)<6)e=1;else{switch(e<<16>>16){case 91:case 93:case 94:{e=1;break e}default:{}}e=(e+-123&65535)<4}}}while(0);return e|0}function A(e){e=e|0;e:do{switch(e<<16>>16){case 38:case 37:case 33:break;default:if(!((e+-58&65535)<6|(e+-40&65535)<7&e<<16>>16!=41)){switch(e<<16>>16){case 91:case 94:break e;default:{}}return e<<16>>16!=125&(e+-123&65535)<4|0}}}while(0);return 1}function O(e){e=e|0;var t=0;t=i[e>>1]|0;e:do{if((t+-9&65535)>=5){switch(t<<16>>16){case 160:case 32:{t=1;break e}default:{}}if(S(t)|0)return t<<16>>16!=46|(P(e)|0)|0;else t=0}else t=1}while(0);return t|0}function j(e){e=e|0;var t=0,r=0,n=0,a=0;r=c;c=c+16|0;n=r;s[n>>2]=0;s[66]=e;t=s[3]|0;a=t+(e<<1)|0;e=a+2|0;i[a>>1]=0;s[n>>2]=e;s[67]=e;s[59]=0;s[63]=0;s[61]=0;s[60]=0;s[65]=0;s[62]=0;c=r;return t|0}function E(e,t,r,i){e=e|0;t=t|0;r=r|0;i=i|0;var a=0,o=0;a=s[67]|0;s[67]=a+20;o=s[65]|0;s[((o|0)==0?240:o+16|0)>>2]=a;s[65]=a;s[a>>2]=e;s[a+4>>2]=t;s[a+8>>2]=r;s[a+12>>2]=i;s[a+16>>2]=0;n[803]=1;return}function L(e,t,r){e=e|0;t=t|0;r=r|0;var n=0,i=0;n=e+(0-r<<1)|0;i=n+2|0;e=s[3]|0;if(i>>>0>=e>>>0?(x(i,t,r<<1)|0)==0:0)if((i|0)==(e|0))e=1;else e=O(n)|0;else e=0;return e|0}function C(e){e=e|0;switch(i[e>>1]|0){case 107:{e=L(e+-2|0,150,4)|0;break}case 101:{if((i[e+-2>>1]|0)==117)e=L(e+-4|0,122,6)|0;else e=0;break}default:e=0}return e|0}function M(e,t){e=e|0;t=t|0;var r=0;r=s[3]|0;if(r>>>0<=e>>>0?(i[e>>1]|0)==t<<16>>16:0)if((r|0)==(e|0))r=1;else r=U(i[e+-2>>1]|0)|0;else r=0;return r|0}function U(e){e=e|0;e:do{if((e+-9&65535)<5)e=1;else{switch(e<<16>>16){case 32:case 160:{e=1;break e}default:{}}e=e<<16>>16!=46&(S(e)|0)}}while(0);return e|0}function N(){var e=0,t=0,r=0;e=s[73]|0;r=s[72]|0;e:while(1){t=r+2|0;if(r>>>0>=e>>>0)break;switch(i[t>>1]|0){case 13:case 10:break e;default:r=t}}s[72]=t;return}function I(e){e=e|0;while(1){if(G(e)|0)break;if(S(e)|0)break;e=(s[72]|0)+2|0;s[72]=e;e=i[e>>1]|0;if(!(e<<16>>16)){e=0;break}}return e|0}function R(){var e=0;e=s[(s[61]|0)+20>>2]|0;switch(e|0){case 1:{e=-1;break}case 2:{e=-2;break}default:e=e-(s[3]|0)>>1}return e|0}function T(e){e=e|0;if(!(L(e,196,5)|0)?!(L(e,44,3)|0):0)e=L(e,206,2)|0;else e=1;return e|0}function _(e){e=e|0;switch(e<<16>>16){case 160:case 32:case 12:case 11:case 9:{e=1;break}default:e=0}return e|0}function P(e){e=e|0;if((i[e>>1]|0)==46?(i[e+-2>>1]|0)==46:0)e=(i[e+-4>>1]|0)==46;else e=0;return e|0}function W(e){e=e|0;if((s[3]|0)==(e|0))e=1;else e=O(e+-2|0)|0;return e|0}function H(){var e=0;e=s[(s[62]|0)+12>>2]|0;if(!e)e=-1;else e=e-(s[3]|0)>>1;return e|0}function q(){var e=0;e=s[(s[61]|0)+12>>2]|0;if(!e)e=-1;else e=e-(s[3]|0)>>1;return e|0}function J(){var e=0;e=s[(s[62]|0)+8>>2]|0;if(!e)e=-1;else e=e-(s[3]|0)>>1;return e|0}function B(){var e=0;e=s[(s[61]|0)+16>>2]|0;if(!e)e=-1;else e=e-(s[3]|0)>>1;return e|0}function D(){var e=0;e=s[(s[61]|0)+4>>2]|0;if(!e)e=-1;else e=e-(s[3]|0)>>1;return e|0}function F(){var e=0;e=s[61]|0;e=s[((e|0)==0?236:e+32|0)>>2]|0;s[61]=e;return(e|0)!=0|0}function K(){var e=0;e=s[62]|0;e=s[((e|0)==0?240:e+16|0)>>2]|0;s[62]=e;return(e|0)!=0|0}function z(){n[802]=1;s[68]=(s[72]|0)-(s[3]|0)>>1;s[72]=(s[73]|0)+2;return}function G(e){e=e|0;return(e|128)<<16>>16==160|(e+-9&65535)<5|0}function Q(e){e=e|0;return e<<16>>16==39|e<<16>>16==34|0}function V(){return(s[(s[61]|0)+8>>2]|0)-(s[3]|0)>>1|0}function X(){return(s[(s[62]|0)+4>>2]|0)-(s[3]|0)>>1|0}function Y(e){e=e|0;return e<<16>>16==13|e<<16>>16==10|0}function Z(){return(s[s[61]>>2]|0)-(s[3]|0)>>1|0}function ee(){return(s[s[62]>>2]|0)-(s[3]|0)>>1|0}function te(){return a[(s[61]|0)+24>>0]|0|0}function re(e){e=e|0;s[3]=e;return}function ne(){return s[(s[61]|0)+28>>2]|0}function ie(){return(n[803]|0)!=0|0}function se(){return(n[804]|0)!=0|0}function ae(){return s[68]|0}function oe(e){e=e|0;c=e+992+15&-16;return 992}return{su:oe,ai:B,e:ae,ee:X,ele:H,els:J,es:ee,f:se,id:R,ie:D,ip:te,is:Z,it:ne,ms:ie,p:l,re:K,ri:F,sa:j,se:q,ses:re,ss:V}}("undefined"!=typeof self?self:global,{},X),Y=V.su(ee-(2<<17))}const n=re.length+1;V.ses(Y),V.sa(n-1),te(re,new Uint16Array(X,Y,n)),V.p()||(ie=V.e(),le());const i=[],s=[];for(;V.ri();){const e=V.is(),t=V.ie(),r=V.ai(),n=V.id(),s=V.ss(),a=V.se(),o=V.it();let c;V.ip()&&(c=se(-1===n?e:e+1,re.charCodeAt(-1===n?e-1:e))),i.push({t:o,n:c,s:e,e:t,ss:s,se:a,d:n,a:r})}for(;V.re();){const e=V.es(),t=V.ee(),r=V.els(),n=V.ele(),i=re.charCodeAt(e),a=r>=0?re.charCodeAt(r):-1;s.push({s:e,e:t,ls:r,le:n,n:34===i||39===i?se(e+1,i):re.slice(e,t),ln:r<0?void 0:34===a||39===a?se(r+1,a):re.slice(r,n)})}return[i,s,!!V.f(),!!V.ms()]}(i.S,i.u)}catch(e){M(e),i.a=[[],[],!1]}return i})(),i)}const Ge=e=>Error(`${e} feature must be enabled via <script type="esms-options">{ "polyfillEnable": ["${e}"] }<\/script>`);function Qe(e,t){e.L||(e.L=e.f.then((async()=>{let r=t;e.d=e.a[0].map((({n:n,d:i,t:a,a:o})=>{const c=a>=4;if(c){if(!s&&!S)throw Ge("source-phase");z||(e.n=!0)}if(o>0){if(!s&&!$&&!v)throw Ge("css-modules / json-modules");B||J||(e.n=!0)}if(-1!==i||!n)return;const l=ue(n,e.r||e.u);if(l.n&&(e.n=!0),(i>=0||l.N)&&(e.N=!0),-1!==i)return;if(L&&L(l.r)&&!c)return{l:{b:l.r},s:!1};r.integrity&&(r=Object.assign({},r,{integrity:void 0}));const f={l:ze(l.r,r,e.r,null),s:c};return f.s||Qe(f.l,t),f})).filter((e=>e))})))}function Ve(){for(const e of document.querySelectorAll(s?"link[rel=modulepreload-shim]":"link[rel=modulepreload]"))e.ep||ft(e);for(const e of document.querySelectorAll("script[type]"))e.type==="importmap"+(s?"-shim":"")?e.ep||ot(e):e.type==="module"+(s?"-shim":"")&&(Le=!1,e.ep||ct(e))}function Xe(e){const t={};return e.integrity&&(t.integrity=e.integrity),e.referrerPolicy&&(t.referrerPolicy=e.referrerPolicy),e.fetchPriority&&(t.priority=e.fetchPriority),"use-credentials"===e.crossOrigin?t.credentials="include":"anonymous"===e.crossOrigin?t.credentials="omit":t.credentials="same-origin",t}let Ye=Promise.resolve(),Ze=1;function et(){0!=--Ze||h||!s&&ge||document.dispatchEvent(new Event("DOMContentLoaded"))}let tt=1;function rt(){0!=--tt||h||!s&&ge||window.dispatchEvent(new Event("load"))}e&&(document.addEventListener("DOMContentLoaded",(async()=>{await Ae,et()})),window.addEventListener("load",(async()=>{await Ae,rt()})));let nt=1;function it(){0!=--nt||h||!s&&ge||document.dispatchEvent(new Event("readystatechange"))}const st=e=>e.nextSibling||e.parentNode&&st(e.parentNode),at=(e,t)=>e.ep||!t&&(!e.src&&!e.innerHTML||!st(e))||null!==e.getAttribute("noshim")||!(e.ep=!0);function ot(t,r=nt>0){if(!at(t,r)){if(t.src){if(!s)return;$e=!0}je=je.then((async()=>{Se=_(t.src?await(await De(t.src,Xe(t))).json():JSON.parse(t.innerHTML),t.src||j,Se)})).catch((e=>{e instanceof SyntaxError&&(e=new Error(`Unable to parse import map ${e.message} in: ${t.src||t.innerHTML}`)),M(e)})),!xe&&Le&&je.then((()=>xe=Se)),Le||ve||(ve=!0,s||!ge||G||(ge=!1,e&&Oe())),Le=!1}}function ct(e,t=nt>0){if(at(e,t))return;if("ts"===e.lang&&!e.src){const t=e.innerHTML;return Fe().then((()=>{const r=qe(t,j);return void 0!==r&&(O(),Ee=!1),Ce(j,Xe(e),void 0===r?t:r,void 0===r,void 0)})).catch(M)}const r=null===e.getAttribute("async")&&nt>0,n=Ze>0,i=tt>0;i&&tt++,r&&nt++,n&&Ze++;const a=Ce(e.src||j,Xe(e),!e.src&&e.innerHTML,!s,r&&Ye).catch(M);h||a.then((()=>e.dispatchEvent(new Event("load")))),r&&(Ye=a.then(it)),n&&a.then(et),i&&a.then(rt)}const lt={};function ft(e){e.ep=!0,lt[e.href]||(lt[e.href]=Ke(e.href,Xe(e)))}}();
      </script>

      <script type="module">
          import {initGlobal, buildSimpleApp} from "./src/webcom.js";

          initGlobal();
          window.htmlapp = buildSimpleApp({
              data() {
                return {
                    str: 'str',
                    frm: 'str',
                    items: []
                }
              },
              methods: {
                  handleOpenDialog() {
                        document.querySelector('#dialog1').showModalApp({
                            data() {
                                return {
                                    str: '此操作将同时删除相关数据',
                                }
                            }
                        })
                  },
                  handleTheme(e) {
                      // console.log('handleTheme')
                      document.querySelector('#config1').classList.toggle('z-dark');
                  },
                  handleSelectPanel() {
                      document.querySelector('#panel1').setAttribute('selectindex', 2)
                  }
              }
          });

      </script>
  </head>
  <body>
    <z-config id="config1" >
        <div class="z-container" :appname="str">
            <div class="title">按钮</div>
            <p></p>
            <div>
                <button bind:click="handleTheme" class="z-button" type="button">切换深色模式</button>
            </div>
            <div class="title">表单</div>
            <p></p>
            <div class="z-row">
                <div >
                    颜色
                    <z-fcinput type="bcolor"></z-fcinput>
                    <z-fcinput type="bcolor" value="rgba(209, 28, 238, 0.61)"></z-fcinput>
                </div>
            </div>
            <div class="title">时间选择器</div>
            <p>支持标准时间格式yyyy-mm-ddThh:mm:ssZ</p>
            <div class="z-row">
                <div>
                    <p>默认</p>
                    <z-fcinput type="datetime-local"
                               value="2016-03-06T10:00:00Z" ></z-fcinput>
                </div>
                <div>
                    <p>可以设置show-format</p>
                    <z-fcinput type="datetime-local" show-format="YYYY/MM/DD HH:mm:ss"
                               value="2016-03-06T10:00:00Z" ></z-fcinput>
                </div>
            </div>
            <div class="title">下拉选择</div>
            <p></p>
            <div >
                <div class="z-row">
                    <div>
                        <p>靠左边</p>
                        <z-fcinput type="select" value="option3" >
                            <option value="option1">option1</option>
                            <option value="option2">option2</option>
                            <option value="option3">option3</option>
                            <option value="option4">option4</option>
                            <option value="option5">option5</option>
                            <option value="option6">option6</option>
                        </z-fcinput>
                    </div>
                    <div>
                        <p>靠右边</p>
                        <z-fcinput type="select" pos="r" value="option3" >
                            <option value="option1">option1</option>
                            <option value="option2">option2</option>
                            <option value="option3">option3</option>
                            <option value="option4">option4</option>
                            <option value="option5">option5</option>
                            <option value="option6">option6</option>
                        </z-fcinput>
                    </div>
                    <div>
                        <p>靠左上</p>
                        <z-fcinput type="select" pos="lt" value="option3" >
                            <option value="option1">option1</option>
                            <option value="option2">option2</option>
                            <option value="option3">option3</option>
                            <option value="option4">option4</option>
                            <option value="option5">option5</option>
                            <option value="option6">option6</option>
                        </z-fcinput>
                    </div>
                    <div>
                        <p>靠右上</p>
                        <z-fcinput type="select" pos="rt" value="option3" >
                            <option value="option1">option1</option>
                            <option value="option2">option2</option>
                            <option value="option3">option3</option>
                            <option value="option4">option4</option>
                            <option value="option5">option5</option>
                            <option value="option6">option6</option>
                        </z-fcinput>
                    </div>
                    <div>
                        <p>自动打</p>
                        <z-fcinput type="select" pos="h" value="option3" >
                            <option value="option1">option1</option>
                            <option value="option2">option2</option>
                            <option value="option3">option3</option>
                            <option value="option4">option4</option>
                            <option value="option5">option5</option>
                            <option value="option6">option6</option>
                        </z-fcinput>
                    </div>
                </div>
                <div class="z-row">
                    <div>
                        <p>readonly</p>
                        <z-fcinput type="select" readonly value="option3" >
                            <option value="option1">option1</option>
                            <option value="option2">option2</option>
                            <option value="option3">option3</option>
                            <option value="option4">option4</option>
                            <option value="option5">option5</option>
                            <option value="option6">option6</option>
                        </z-fcinput>
                    </div>
                </div>
            </div>
            <div class="title">选择列表</div>
            <p></p>
            <div class="z-row">
                <div>
                    <p>设置value</p>
                    <z-option-picker value="option3" >
                        <option value="option1">option1</option>
                        <option value="option2">option2</option>
                        <option value="option3">option3</option>
                        <option value="option4">option4</option>
                        <option value="option5">option5</option>
                        <option value="option6">option6</option>
                    </z-option-picker>
                </div>
                <div>
                    <p>没有设置value</p>
                    <z-option-picker >
                        <option value="option1">option1</option>
                        <option value="option2">option2</option>
                        <option value="option3">option3</option>
                        <option value="option4">option4</option>
                        <option value="option5">option5</option>
                        <option value="option6">option6</option>
                    </z-option-picker>
                </div>

                <div>
                    <p>设置img</p>
                    <z-option-picker
                            class="z-row-options"
                            value="option3" >
                        <option value="option1"><img style="display: block" src="https://fpoimg.com/50x35?text=Preview1&bg_color=e6e6e6&text_color=8F8F8F"></option>
                        <option value="option2"><img style="display: block" src="https://fpoimg.com/50x35?text=Preview2&bg_color=e6e6e6&text_color=8F8F8F"></option>
                        <option value="option3"><img style="display: block" src="https://fpoimg.com/50x35?text=Preview3&bg_color=e6e6e6&text_color=8F8F8F"></option>
                        <option value="option4"><img style="display: block" src="https://fpoimg.com/50x35?text=Preview4&bg_color=e6e6e6&text_color=8F8F8F"></option>
                        <option value="option5"><img style="display: block" src="https://fpoimg.com/50x35?text=Preview5&bg_color=e6e6e6&text_color=8F8F8F"></option>
                        <option value="option6"><img style="display: block" src="https://fpoimg.com/50x35?text=Preview6&bg_color=e6e6e6&text_color=8F8F8F"></option>
                    </z-option-picker>
                </div>
            </div>
            <div class="title">checkbox</div>
            <p></p>
            <div >
                <div class="z-row" style="margin-bottom: 10px;">
                    <z-check-group class="immedidate"
                    ><input type="checkbox" checked /></z-check-group> checkall
                    <z-check-group group="checkboxGroup" class="immedidate"
                    ><input type="checkbox"  /></z-check-group> checkall

                        <z-check-con
                        ><input type="checkbox" group="checkboxGroup" name="check" value="check1"/></z-check-con> check1
                        <z-check-con
                        ><input type="checkbox" group="checkboxGroup" name="check" value="check2"/></z-check-con> check2
                        <z-check-con
                        ><input type="checkbox" group="checkboxGroup" name="check" value="check3"/></z-check-con> check3

                </div>
                <div class="z-row">


                    <z-check-con
                    ><input type="radio" name="radio"/></z-check-con> radio1
                    <z-check-con
                    ><input type="radio" name="radio"/></z-check-con> radio2
                    <z-check-con
                    ><input type="radio" name="radio"/></z-check-con> radio3
                </div>
            </div>
            <div class="title">switch</div>
            <p></p>
            <div >
                <div>
                    <z-switch ></z-switch>
                    <z-switch  checked></z-switch>
                </div>
            </div>
            <div class="title">truncate</div>
            <p></p>
            <div>
                <z-truncate style="display: block; width: 340px;">曼学家开创性的使用了闭环赢学和印度的种姓梯度，将之前难以解释的种种现象囊括了起来。其中，赢学比较容易理解。而种姓，比网友普遍了解的要更加复杂，需要对印度社会文化有所研究，这里只是概括一些简单易懂的结论。</z-truncate>
            </div>
            <div class="title">layout</div>
            <p></p>
            <div>
                <div class="z-com-row z-com-row--full-left" style="width:340px;">
                    <div class="z-com-row-item z-com-row__main z-com-row--full-right">
                        <div class="z-com-row-item z-com-row__left">left</div>
                        <div class="z-com-row-item z-com-row__mid"   style="padding-left: 10px">
                            <div>toolbar</div>
                            <div>content</div>
                        </div>
                    </div>
                </div>

                <div class="z-com-row z-com-row--full-left" style="width:340px;">
                    <div class="z-com-row-item z-com-row__main z-com-row--full-right">
                        <div class="z-com-row-item z-com-row__left">left</div>
                        <div class="z-com-row-item z-com-row__mid"   style="padding-left: 10px">mid</div>
                    </div>
                    <div class="z-com-row__action z-com-row-item">right</div>
                </div>
            </div>
            <div class="title">给tab用的panels</div>
            <p></p>
            <div>
                <button type="button" class="z-button" bind:click="handleSelectPanel">选择第3个</button>
                <z-panels id="panel1" name="panel1">
                    <template>
                        <details>
                            <summary></summary>
                            <div>
                                panel1
                                <ul>
                                    <li>200GB RAM</li>
                                    <li>4PB storage</li>
                                </ul>
                            </div>
                        </details>

                        <details>
                            <summary></summary>
                            <div>
                                panel2
                                <ul>
                                    <li>Extreme mode: on</li>
                                    <li>Raytracing: enabled</li>
                                </ul>
                            </div>
                        </details>

                        <details>
                            <summary></summary>
                            <div>
                                panel3
                                <ul>
                                    <li>Material: Faux Leather, Metal</li>
                                    <li>Item Weight: 10.2Kg</li>
                                </ul>
                            </div>
                        </details>
                    </template>
                </z-panels>


            </div>
            <div class="title">弹窗</div>
            <p></p>
            <div>
                <button type="button" class="z-button"
                        bind:click="handleOpenDialog"
                >外部打开dialog</button>
                <z-dialog
                        id="dialog1"
                        dialog-title="危险操作"
                        confirm-text="确认删除"
                >
                    <template name="prerender">
<!--        放样式                -->
                    </template>
                    <template name="content">
                        <small> <z-text :value="str"></z-text></small>
                    </template>
                </z-dialog>
           </div>
            <div class="mb-show">
                <div class="title">移动扩展</div>
                <p></p>
                <div>
                    <style>
                        .exp-scroll {
                            display: grid; grid-template-columns: repeat(6, 100%); overflow-x: auto;
                            scroll-snap-type: x mandatory;
                            > div {
                                scroll-snap-align: center;
                                height: 30vh;
                            }
                        }
                    </style>
                    <div id="expscroll" class="exp-scroll">
                        <div>page1</div>
                        <div>page2</div>
                        <div>page3</div>
                        <div>page4</div>
                        <div>page5</div>
                        <div>page6</div>
                    </div>
                </div>
            </div>
            <div class="title">简单框架</div>
            <p></p>
            <div>


<!--                <m-deftag ><div attr="text" boolattr>text2</div></m-deftag>-->
                <template id="simpleapptpl">
                    <style>
                        .z-com-row[level0] {
                            width: 340px;
                        }
                        /*.csstest :not(:has(*)) {*/
                        /*  border: 1px solid red;*/
                        /*}*/
                    </style>

                    <vtemplate name="m-deftag">
                        <div class="z-com-row z-com-row--full-left" __level__>
                            <div class="z-com-row-item z-com-row__main z-com-row--full-right">
                                <div class="z-com-row-item z-com-row__left">{slot default}{slot left}</div>
                                <div class="z-com-row-item z-com-row__mid" >{slot mid}</div>
                            </div>
                            <div class="z-com-row__action z-com-row-item">{slot right}</div>
                            {slot nextitem}
                        </div>
                    </vtemplate>

                    <div class="csstest">
                        <div>
<!-- subitem -->
                        </div>
                    </div>


                    <m-deftag >
                        <block slot="left">left</block>
                        <block slot="mid"><div style="padding-left: 10px">
                            <div>toolbar</div>
                            <div>
                                <m-deftag ><block slot="left">subleft</block></m-deftag>
                            </div>
                        </div></block>
                    </m-deftag >

                    <m-deftag >
                        <block slot="left"><div>left</div></block>
                        <block slot="mid"><div style="padding-left: 10px">mid</div></block>
                    </m-deftag >

                    <m-deftag >
                        <block slot="left"><div>left</div></block>
                        <block slot="mid"><div style="padding-left: 10px">mid</div></block>
                        <block slot="right">right</block>
                    </m-deftag >
                    <z-text :value="str">str</z-text>
                    <z-each cond="items as item, index">
                        <template>
                            <div>
                                <z-text :value="index"></z-text>
                                <z-text :value="item.name"></z-text>
                                <z-cond>
                                    <template cond="str1">
                                        <div>items cond1 is true</div>
                                        <button type="button" class="z-button">btncond1</button>
                                    </template>
                                    <template cond="str">
                                        <div>items cond2 is true</div>
                                        <button type="button" class="z-button">btncond2</button>
                                    </template>
                                </z-cond>
                            </div>
                        </template>
                    </z-each>
                    <z-cond>
                        <template cond="str1">
                            <div>cond1 is true</div>
                            <button type="button" class="z-button">btn</button>
                        </template>
                        <template cond="str">
                            <div>cond2 is true</div>
                            <button type="button" class="z-button"
                                    bind:click="handleOpenDialog"
                            >外部打开dialog</button>

                        </template>
                    </z-cond>
                </template>
                <div id="simpleapp"></div>
            </div>
        </div>
    </z-config>
    <script type="module">
        import {createUUID} from "./src/core.js";

        // document.getElementById('simpleapp').innerHTML =
        //
        //     globalThis.ZWebcom.parseVTemplate(
        //         document.getElementById('simpleapptpl').innerHTML,
        //     )

        globalThis.ZWebcom.baseElementRep.define('m-deftag', class extends globalThis.ZWebcom.BaseElement {
            constructor() {
                super();
            }
            mounted() {
                console.log("setHtml mounted");
            }
            unmounted() {
                console.log("setHtml ummonted");
            }
            attrChanged(name, oldValue, newValue) {
                console.log('setHtml', name, oldValue, newValue);
            }
        });

        // globalThis.ZWebcom.setTemplate(
        //     document.getElementById('simpleapp'),
        //     document.getElementById('simpleapptpl')
        // )

        document.getElementById('simpleapp').zSetTemplate(
            document.getElementById('simpleapptpl')
        )

        requestAnimationFrame(() => {
            htmlapp.mount(document);
        })

        setTimeout(() => {
            if (location.href.includes('frm')) {
                htmlapp.setData('str', 'hello');
                htmlapp.setData('items',  [
                    {
                        id: createUUID(),
                        name: 'name1',
                    },
                    {
                        id: createUUID(),
                        name: 'name2',
                    },
                    {
                        id: createUUID(),
                        name: 'name3',
                    }
                ]);
            }
        })
    </script>
  </body>
</html>
